import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  // ①用处使用自定义图标字体
  createFromIconfontCN,
  LoginOutlined
} from '@ant-design/icons'
import { Layout, Menu, theme, Dropdown, message, Breadcrumb } from 'antd'
import React, { useEffect, useState } from 'react'
// 引入头像图片
import head from '../assets/img/1.jpg'
import logoImg from '../assets/logo/logo.png'
// 引入路由跳转的钩子函数
import { useLocation, useNavigate } from 'react-router-dom'

const { Header, Sider, Content } = Layout

// 创建自定义图标字体组件
const MyIcon = createFromIconfontCN({
  // ②指定要使用的阿里图标字体库的路径
  scriptUrl: '//at.alicdn.com/t/c/font_3876274_bvk2xhld5no.js'
})

const Main = ({ children }) => {
  const [collapsed, setCollapsed] = useState(false)
  // const [pathname,setPathname] = useState('')
  //保存面包屑导航条
  const [breadcrumd,setBreadcrumd] = useState([])
  const {
    token: { colorBgContainer }
  } = theme.useToken()
  //调用跳转钩子函数
  const navigate = useNavigate()

  //获取地址栏中当前路径
  const obj = useLocation()
  // console.log(obj.pathname);
  //把路径放到状态pathname
  // setPathname(obj.pathname)
 
  // 侧边栏菜单
  const slideMenu = [
    {
      key: '/admin/dashboard',
      icon: <MyIcon type="icon-shouye" />,
      label: '看板'
    },
    {
      key: '/admin/system',
      icon: <MyIcon type="icon-shezhi" />,
      label: '系统管理',
      children: [
        {
          key: '/admin/system/user',
          label: '用户管理'
        },
        {
          key: '/admin/system/person',
          label: '人员管理'
        },
        {
          key: '/admin/system/role',
          label: '角色管理'
        }
      ]
    },
    {
      key: '/admin/order',
      icon: <MyIcon type="icon-dingdan" />,
      label: '订单管理'
    },
    {
      key: '/admin/medicine',
      icon: <MyIcon type="icon-yaopin" />,
      label: '药品管理'
    },
    {
      key: '/admin/disease',
      icon: <MyIcon type="icon-jibingguanli" />,
      label: '疾病管理'
    },
    {
      key: '/admin/article',
      icon: <MyIcon type="icon-shu" />,
      label: '文章管理',
      children: [
        {
          key: '/admin/article/catlist',
          label: '分类列表'
        },
        {
          key: '/admin/article/newslist',
          label: '文章列表'
        }
      ]
    },
    {
      key: '/admin/expert',
      icon: <MyIcon type="icon-zhuanjia" />,
      label: '专家管理'
    },
    {
      key: '8',
      icon: <MyIcon type="icon-yonghu-xianxing" />,
      label: '用户管理',
      children: [
        {
          key: '8-1',
          label: '用户列表'
        },
        {
          key: '8-2',
          label: '健康档案'
        }
      ]
    },
    {
      key: '9',
      icon: <MyIcon type="icon-chufang" />,
      label: '处方管理'
    },
    {
      key: '10',
      icon: <MyIcon type="icon-keshi" />,
      label: '科室管理'
    },
    {
      key: '11',
      icon: <MyIcon type="icon-yiyuan" />,
      label: '医院管理'
    }
  ]
  // 使用递归将slideMenu进行数组扁平化
  // 将结果放入到新数组
  var arr = []
  function myFlat(arr2) {
    arr2.forEach((item) => {
      // item表示拿到的每一项
      // 如果每一项中有children属性，说明下边还有数组
      if (item.children) {
        myFlat(item.children)
      }
      // 只要遍历到一项，就放入到数组
      arr.push(item)
    })
  }
  myFlat(slideMenu)
  // console.log(arr)
  //定义函数，从数组中查找路径中含有的key 值
  function findPath(path){
    //遍历数组 filter过滤
    const newArr =  arr.filter(item=>{
      //includes()方法判断数组路面是否含有某一项
      return path.includes(item.key)
    })
    // console.log(newArr);
    //翻转数组
    newArr.reverse()
    //放入一个首页
    return [{key:'/admn',label:'首页'},...newArr]
  }
  //从当前查找的始祖中单独把key拿出来放到新数组 reduce方法(累加)
  const menuArr = findPath(obj.pathname).reduce((a,b)=>{
    a.push(b.key)
    return a
  },[])
  // console.log(menuArr);
  //只有加载后渲染一次，使用生命周期函数
  useEffect( ()=>{
    //到获取到的凹槽到面包屑导航
    setBreadcrumd(findPath(obj.pathname))
  },[obj] )
  

  // 下拉菜单
  const items = [
    {
      key: '1',
      label: <span>个人中心</span>,
      icon: <MyIcon type="icon-yonghu-xianxing" />
    },
    {
      key: '2',
      label: <span>退出登录</span>,
      icon: <LoginOutlined />,
      onClick: () => {
        navigate('/login')
        message.success('退出登录')
      }
    }
  ]

  let isCollapsed;
  if (collapsed) {
    isCollapsed = ''
  } else {
    isCollapsed = <span>后台管理系统</span>
  }

  return (
    <Layout
      style={{ width: '100vw', height: '100vh' }}
      id="components-layout-demo-custom-trigger"
    >
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        style={{ backgroundColor: '#FFF' }}
      >
        <div className="logo"><img src={logoImg}></img>{isCollapsed}</div>
        <Menu
          theme="light"
          mode="inline"
          defaultSelectedKeys={menuArr} //默认选中项
          defaultOpenKeys={menuArr}  //默认打开项
          items={slideMenu}
          onClick={({ key }) => {
            // console.log(key)
            // key 获取的要跳转的路径
            navigate(key)
          }}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          style={{
            padding: 0,
            background: colorBgContainer
          }}
        >
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: () => setCollapsed(!collapsed)
            }
          )}
          <span>后台管理中心</span>

          <Dropdown
            menu={{
              items
            }}
          >
            <span style={{ float: 'right', marginRight: 20 }}>
              <img
                src={head}
                alt=""
                style={{
                  width: 30,
                  borderRadius: '50%',
                  verticalAlign: 'middle'
                }}
              />
              admin
            </span>
          </Dropdown>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
            overflow: 'hidden'
          }}
        >
          <Breadcrumb style={{marginBottom: 20}}>
            {/* 循环遍历面包屑导航 */}
            {breadcrumd.map(item=>{
              return (
                <Breadcrumb.Item key={item.key}>{item.label}</Breadcrumb.Item>
                )
            })}
          </Breadcrumb>
          {/* 子组件渲染的位置 */}
          <div style={{paddingBottom: 20, height: '100%', overflow: 'auto'}}>
            {children}
          </div>
          
        </Content>
      </Layout>
    </Layout>
  )
}
export default Main
